<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
            >确 定</el-button
          >
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          size="medium"
          label-width="130px"
          label-position="right"
          :disabled="!!isDetail"
          :rules="rules"
        >
          <el-col :span="24">
            <el-form-item label="计划名称" prop="jhmc" required>
              <el-input
                v-model="dataForm.jhmc"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
                prefix-icon=""
                suffix-icon=""
              >
                <template slot="prepend"></template>
                <template slot="append"></template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="组织单位" prop="zzdw" required>
              <el-select
                v-model="dataForm.zzdw"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in zzdwOptions"
                  :key="index"
                  :label="item.F_FullName"
                  :value="item.F_Id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="风险点" prop="fxd" required>
              <el-select
                v-model="fxd"
                placeholder="请选择"
                disabled
                clearable
                :style="{ width: '100%' }"
                multiple
              >
                <el-option
                  v-for="(item, index) in fxdOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-left: 20px">
            <el-button type="primary" @click="FxdSelect"> 选择 </el-button>
          </el-col>
          <!-- <el-col :span="24">
					<el-form-item label="风险点类型" prop="fxdlx" required >
						<el-select v-model="fxdlx" placeholder="请选择" disabled clearable :style='{"width":"100%"}' multiple filterable>
							<el-option v-for="(item, index) in fxdlxOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col> -->
          <el-col :span="24">
            <el-form-item label="被查单位" prop="bcdw" required>
              <el-select
                v-model="dataForm.bcdw"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                @change="getPerson"
              >
                <el-option
                  v-for="(item, index) in bcdwOptions"
                  :key="index"
                  :label="item.F_FullName"
                  :value="item.F_Id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item ref="fzrInput" label="排查人" prop="pcr" >
              <el-select
                v-model="pcr"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                multiple
                filterable
              >
                <el-option
                  v-for="(item, index) in pcrOptions"
                  :key="index"
                  :label="item.realName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排查开始日期" prop="pcksrq" required>
              <el-date-picker
                v-model="dataForm.pcksrq"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                type="date"
                format="yyyy-MM-dd"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排查结束日期" prop="pcjsrq" required>
              <el-date-picker
                v-model="dataForm.pcjsrq"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                type="date"
                format="yyyy-MM-dd"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="false">
            <el-form-item label="创建时间" prop="cjsj">
              <el-input
                v-model="dataForm.cjsj"
                placeholder="系统自动生成"
                readonly
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="display: none">
            <el-form-item label="状态" prop="zt" required>
              <el-select
                v-model="dataForm.zt"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in ztOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排查类型" prop="pclx" required>
              <el-select
                v-model="dataForm.pclx"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in pclxOptions"
                  :key="index"
                  :label="item.LX"
                  :value="item.ID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <FxdsBox
        v-if="fxdsBoxVisible"
        ref="fxdsBox"
        @refreshDataList="initListFxd"
      />
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import FxdsBox from "./FxdBox";
import { departmentPerson } from "@/api/systemIntegration/recard";
export default {
  components: { FxdsBox },
  data() {
    var pcksrqTime = (rule, value, callback) => {
      if (!this.dataForm.pcjsrq) {
        callback();
      } else {
        if (this.dataForm.pcjsrq < value) {
          callback(new Error("排查开始日期应该小于排查结束日期"));
        } else {
          // this.$refs.dataForm.validateField('pcjsrq');
          callback();
        }
      }
    };
    var pcjsrqTime = (rule, value, callback) => {
      if (!this.dataForm.pcksrq) {
        callback();
      } else {
        if (this.dataForm.pcksrq > value) {
          callback(new Error("排查结束日期应该大于排查开始日期"));
        } else {
          callback();
        }
      }
    };
    return {
      fxdsBoxVisible: false, //-
      visible: false,
      isDetail: false,
      dataForm: {
        jhmc: undefined,
        zzdw: undefined,
        fxd: [],
        fxdlx: [],
        pcr: [],
        bcdw: undefined,
        pcksrq: undefined,
        pcjsrq: undefined,
        zt: "1",
        pclx: undefined,
        sz: [],
      },
      rules: {
        jhmc: [
          {
            required: true,
            message: "请输入计划名称",
            trigger: "blur",
          },
        ],
        zzdw: [
          {
            required: true,
            message: "请输入组织单位",
            trigger: "blur",
          },
        ],
        fxd: [
          {
            required: true,
            message: "请输入风险点",
            trigger: "blur",
          },
        ],
        pcr: [
          {
            required: true,
            message: "请输入排查人",
            trigger: "blur",
          },
        ],
        bcdw: [
          {
            required: true,
            message: "请输入被查单位",
            trigger: "blur",
          },
        ],
        pcksrq: [
          {
            required: true,
            message: "请输入排查开始日期",
            trigger: "blur",
          },
          { validator: pcksrqTime, trigger: "change" },
        ],
        pcjsrq: [
          {
            required: true,
            message: "请输入排查结束日期",
            trigger: "blur",
          },
          { validator: pcjsrqTime, trigger: "change" },
        ],
        zt: [
          {
            required: true,
            message: "请输入状态",
            trigger: "blur",
          },
        ],
        pclx: [
          {
            required: true,
            message: "请输入排查类型",
            trigger: "blur",
          },
        ],
      },
      zzdwOptions: [],
      fxdOptions: [],
      fxdlxOptions: [],
      pcrOptions: [],
      bcdwOptions: [],
      ztOptions: [
        { fullName: "未派发", id: "1" },
        { fullName: "进行中", id: "2" },
        { fullName: "已结束", id: "3" },
      ],
      pclxOptions: [],

      fxd: [],
      fxdlx: [],
      pcr: [],
      fxdPcrList: [],
    };
  },
  created() {
    this.getzzdwOptions();
    this.getbcdwOptions();
    this.getpclxOptions();
  },
  watch: {
    "dataForm.bcdw": {
      handler(newVal, oldVal) {
        if (newVal && oldVal != undefined) {
          this.getPerson();
          this.pcr = []; 
        }
      },
    },
  },
  methods: {
    getzzdwOptions() {
      previewDataInterface("772d2cbcadd24df79243e3d92ef5f690").then((res) => {
        this.zzdwOptions = res.data;
      });
    },
    getbcdwOptions() {
      previewDataInterface("772d2cbcadd24df79243e3d92ef5f690").then((res) => {
        this.bcdwOptions = res.data;
      });
    },
    getpclxOptions() {
      previewDataInterface("7ffbe4af1ea946dabb20e1dc367220a9").then((res) => {
        this.pclxOptions = res.data;
      });
    },

    goBack() {
      this.$emit("refresh");
    },
    async getPerson() {
      const { data } = await departmentPerson({
        organizeId: this.dataForm.bcdw,
      });
      this.pcrOptions = data.list;
      let thisUserInfo = this.$store.state.user.userInfo
      if(thisUserInfo.departmentId == this.dataForm.bcdw){
        this.pcrOptions.push({
          'id':thisUserInfo.userId,
          'realName':thisUserInfo.userName
        })
      }
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) { 
          request({
            url: "/api/System/pcjh/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataForm = res.data;
            this.fxd = this.dataForm.fxd ? this.dataForm.fxd.split(",") : [];
            this.fxdlx = this.dataForm.fxdlx
              ? this.dataForm.fxdlx.split(",")
              : [];
            this.pcr = this.dataForm.pcr ? this.dataForm.pcr.split(",") : [];
            // this.fxdPcrList = res.data.sz;
            let szString = res.data.sz;
            let szArr1 = szString.replace(/\|/g, ",");
            let szArr = JSON.parse(szArr1);
            this.fxdPcrList = szArr;
            let fxdArr = [];
            let fxdlxArr = [];
            if (szArr.length > 0) {
              for (let r = 0; r < szArr.length; r++) {
                fxdArr.push({ fullName: szArr[r].mc, id: szArr[r].id });
                fxdlxArr.push({ fullName: szArr[r].lx, id: szArr[r].lx });
              }
            }
            this.fxdOptions = fxdArr;
            this.fxdlxOptions = fxdlxArr;
          	this.getPerson();
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.dataForm.fxd = this.fxd.join(",");
      this.dataForm.fxdlx = this.fxdlx.join(",");
      this.dataForm.pcr = this.pcr.join(",");
      // this.dataForm.sz = JSON.stringify(this.dataForm.sz);
      let strfxdPcrList = JSON.stringify(this.fxdPcrList).replace(/},/g, "}|");
      this.$set(this.dataForm, "sz", strfxdPcrList);

      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          if (!this.dataForm.id) {
            request({
              url: "/api/System/pcjh",
              method: "post",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                },
              });
            });
          } else {
            request({
              url: "/api/System/pcjh/" + this.dataForm.id,
              method: "PUT",
              data: this.dataForm,
            }).then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                },
              });
            });
          }
        }
      });
    },
    FxdSelect() {
      this.fxdsBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.fxdsBox.init(this.fxdPcrList);
      });
    },
    initListFxd(list) {
      this.rightsDate = [];
      this.fxdPcrList = list;
      //   this.dataForm.sz = list;
      let fxdArr = [];
      let fxdlxArr = [];
      let formFxd = [];
      let formFxdlx = [];
      for (let i = 0; i < list.length; i++) {
        fxdArr.push({ fullName: list[i].mc, id: list[i].id });
        fxdlxArr.push({ fullName: list[i].lx, id: list[i].lx });
        formFxd.push(list[i].id);
        formFxdlx.push(list[i].lx);
      }
      this.fxdOptions = fxdArr;
      this.fxdlxOptions = fxdlxArr;
      this.dataForm.fxd = formFxd;
      this.dataForm.fxdlx = formFxdlx;
      this.fxd = formFxd;
      this.fxdlx = formFxdlx;
    },
  },
};
</script>